<template>
    <div class="vue-code flex-column">
        <h1>
            {{ fileName }}
            <span @click="$emit('close')">X</span>
        </h1>
        <div class="flex-1">
            <highlightjs :code="code"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch} from "vue";
import 'highlight.js/lib/common';
// @ts-ignore
import HljsVuePlugin from "@highlightjs/vue-plugin";
const highlightjs = HljsVuePlugin.component
import {useRoute} from "vue-router";

const code = ref('')
const fileName = ref('')

const route = useRoute()

watch(route, function () {
    fetchCode()
})

async function fetchCode() {
    fileName.value = `${String(route.name)}.vue`
    const option = {
        headers: {
            'Content-Type': 'text/plain'
        }
    }
    const response = await fetch(`/code-example/vue-files/${fileName.value}`, option)
    code.value = await response.text() || '当前页面没有源码'
}

onMounted( () => {
    fetchCode()
})

</script>

<style scoped lang="scss">
    .vue-code {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 35vw;
        z-index: 1;
        overflow: auto;
        background-color: #f6f6f6;
        box-shadow: -2px 0 4px 0 #CCC;

        h1 {
            background-color: #ffffff;
            text-align: center;

            span {
                float: right;
                cursor: pointer;
                margin-right: 20px;
            }
        }

        .flex-1 {
            width: 100%;
            overflow: auto;
        }
    }
</style>
